<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts波形图并标记波峰波谷</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例

  var myChart = echarts.init(document.getElementById('main'))
  // 初始数据
  var data = new Array(50).fill(null),xdata=new Array(50).fill(''),size=50;

  // 图表配置项
  var option = {
    xAxis: {
      type: 'category',
      data: xdata, // 初始时x轴数据为空，后续动态添加
      scale: !0
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [],
      type: 'line',
      symbol: "none",
      smooth: !0,
    }]
  };

  // 初始化图表
  myChart.setOption(option);

  // 定时器更新数据
  var timer = setInterval(function () {
    // 移除数组的第一个元素
    data.shift();
    // 生成新的数据点并添加到数组末尾
    data.push(Math.round(Math.random() * 1000));
    option.xAxis.data.shift();
    option.xAxis.data.push(size++);
    // 更新x轴数据（如果需要的话，这里可以根据实际情况动态生成x轴数据）
    // 例如：option.xAxis.data.shift(); option.xAxis.data.push('新时间点');
    // 但在这个例子中，我们假设x轴是时间或序号，不需要手动更新

    // 刷新图表
    myChart.setOption({
      series: [{
        data: data
      }],
      xAxis:{
        data: option.xAxis.data
      }
    });
  }, 500); // 每秒更新一次数据
</script>
</body>
</html>
